<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <router-link tag="li" :to="'/headlinedetails/' + item.id" class="item" v-for="item of list" :key="item.id">
        <div class="item-left">
          <p class="item-left-title">{{item.title}}</p>
          <p class="item-left-text">{{item.text}}</p>
          <p class="item-time"><span>{{item.reading}}</span></p>
        </div>
        <div class="item-right">
          <img :src="item.imgUrl">
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'BaiKeList',
    props: {
      list: Array
    },
    data () {
      return {}
    },
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll  = new BScroll(this.$refs.wrap)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    overflow hidden
    position: absolute
    top 1.8rem
    right  0
    bottom  0
    left  0
    margin-top .3rem

  .title
    title()

  .item
    item()
    BackgroundShadow()
    margin .4rem 0

  .item-left
    width 5rem
    height 2rem
    display flex
    flex-direction column

  .item-left-title
    line-height: .64rem;
    font-size .34rem
    font-weight bolder

  .item-left-text
    margin .053333rem 0 .4rem .026667rem
    line-height: 1.7em;
    overflowEllipsis()

  .item-right
    width 2.3rem
    height 2rem
    overflow hidden

  .item-right img
    img()

  .item-time
    information()

  .item-more
    button()
</style>
